<template>
  <!-- 融资台账-还款明细   -->
    <div class="interestCalculationDetailsPage">
        <div class="search-wrap d-flex a-center j-end">
            <div class="search-buttons m-l50 d-flex a-center">
                <el-button
                        class="button_edit"
                        @click="deleteRepaymentDetails"
                >
                    删除
                </el-button>
                <el-button
                        class="button_edit"
                        @click="onExport"
                >
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                ref="publicTableRef"
                class="m-t20"
                index
                selection
                :indexWidth="'100'"
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
                @handleSelectionChange="handleSelectionChange"
        ></public-table>
    </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {
    ElSelect,
    ElOption,
    ElForm,
    ElFormItem,
    ElRow,
    ElCol,
    ElDatePicker,
    ElMessage, ElMessageBox
} from "element-plus";
import PublicTable from "@/components/PublicTable.vue";

import {tableCommonFun} from "@/hooks/tableCommon";
import {companyApi, exportApi, financingApi} from "@/api/businessFinance";
import PublicDialog from "@/components/PublicDialog.vue";
import {exportExcelFile, limitInputNum, resetForm} from "@/common/utils/GlobalUtils";
import {useRouter} from "vue-router";

const router = useRouter();
const id = router.currentRoute.value.params.id;

const interfaceConfig = reactive({
    fileName:'businessFinance',
    apiPath:'financingApi.getBankRepaymentRecordVo',
});

const {
    form,
    page,
    tableOption,
    tableData,
    getData,
}  = tableCommonFun(interfaceConfig);


tableOption.value = [
    { label: "公司名称 ", prop: "companyName" },
    { label: "金融机构 ", prop: "institutionName" },
    { label: "贷款时间 ", prop: "loanTime" },
    { label: "贷款利率 ", prop: "loanInterestRate" },
    { label: "贷款用途 ", prop: "loanPurpose" },
    { label: "还款时间 ", prop: "repaymentTime" },
    { label: "还款金额 ", prop: "repaymentAmount" },
    { label: "担保类型 ", prop: "guaranteeType",formatter:(val,row)=>{
            return ['','信用','担保','抵押','质押'][val] || '-';
        } },
    { label: "还款记录编号 ", prop: "repaymentRecordId" },

];

/**
 * 页面改变时触发
 */
const onPageChange = (e) => {
    page.current = e.page;
    page.size = e.limit;
    let param = {
        param: form.value.id,
        pageNum: page.current,
        pageSize: page.size,
    };
    getData(param);
}

/**
 * el-table多选
 * @param e
 */
const selectedArr = ref([]);
const handleSelectionChange = (e) => {
    selectedArr.value = e;
}

/**
 * 删除按钮
 */
const deleteRepaymentDetails = () => {
    if(selectedArr.value.length===0){
        ElMessage.warning('请选择要操作的行!');
        return;
    }
    ElMessageBox.alert(`已选择${selectedArr.value.length}条数据，是否删除？`, '提示', {
        confirmButtonText: '确认',
        callback: (action) => {
            if(action === 'confirm'){
                financingApi.deleteBankRepaymentRecord({
                    list:selectedArr.value.map(item=>{return item.repaymentRecordId})
                }).then(res=>{
                    if(res.code === '200'){
                        ElMessage.success('删除成功!');
                        page.current  = 1;
                        page.size  = 10;
                        getData({
                            pageNum:1,
                            pageSize:10,
                            param:id
                        });
                    }
                })
            }
        },
    })
}

/**
 * 导出按钮
 */
const onExport = () => {
    exportApi.bankRepaymentRecordLeadingOut(id).then(res=>{
        if(res){
            exportExcelFile(res,'还款明细表');
        }
    })
}

onMounted(()=>{
    form.value.id = id;
    getData({
        pageNum:1,
        pageSize:10,
        param:id
    });
});
</script>

<style lang="scss" scoped>
.interestCalculationDetailsPage{
  .el-input-width{
    width: 243px !important;
  }
  .search-wrap{
    .search-item{

      .el-input{
        width: 243px !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
.public-dialog-content{
  .dialog-title-box{
    height: 30px;
    span{
      font-size: 15px;
      font-weight: 600;
    }
  }
}
</style>
